<template>
  <div class="div" ref="div">
    
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import {onMounted,ref,reactive} from 'vue'
import {getdevice} from '../../request/index'

const option=reactive({
    tooltip:null,
    legend:null,
    series:[
        {
        name:'访问来源',
        type:'pie',
        radius:'55%',
        center:['50%','50%'],
         data:null,
         roseType:'radius',
         label:{
            color:'#fff'
         },
         labelLine:{
            lineStyle:{
                color:'#888'
            } 
         },
         itemStyle:{
            normal:{
                color:function(params){
                    var colorList=['#ffff99','#00ffcc','#00ff99'];
                    return colorList[params.dataIndex % colorList.length]
                }
            }
         },
         animationType:'scale',
            animationEasing:'elasticOut',
           animationDelay:function(idx){
            return Math.random() *200
           }
    }]
})
const div=ref()
let myChart 
onMounted(()=>{
    getdevice().then(res=>{
         console.log('设备统计',res.data.data);
         myChart=echarts.init(div.value)
            option.tooltip=res.data.data.tooltip
            option.legend=res.data.data.legend
            option.series[0].data=res.data.data.series[0].data


    myChart.setOption(option)
       
    })
   


})
  window.addEventListener('resize', function() {
    myChart.resize();
  });


</script>

<style scoped>
.div{
    width: 99%;
    height: 90%;
}
</style>